<template>
	<view class="main animated fadeIn faster ">
		<view class="position-fixed left-0 top-0 right-0 pt-10 pl-4 pb-2" style="z-index: 999;" :style="{background: 'rgba(255,255,255,'+titleBgOpcity+')'}">
			<view class="d-flex d-flex-middle">
				<view @click="goBack"><text class="iconfont icon-31fanhui1 font30" :style="{color: textColor}"></text></view>
				<view class="font32 color000 text-center mr-6 pr-1" style="flex: 1;" :style="{opacity: -titleOpcity}">#{{topicName}}</view>
			</view>
		</view>
		<view class="background w-100 d-flex d-flex-column" style="height: 420rpx;background: linear-gradient(to right, #2f8199, #296798);">  
			<view class="colorfff mt-200 ml-4" style="font-size: 50rpx;z-index: 10;" :style="{opacity: titleOpcity}">#{{topicName}}</view>
			<view class="font24 colorfff pt-3 ml-4" style=""> {{topicLen}}条动态</view>
			<text class="hash">#</text>
		</view>
		<view class="rounded30" style="background-color: white;margin-top: -59rpx;transform: translateZ(0);">
			<view class="recommendation">
			    <text class="text font-bold font30">全部</text>
			    <text class="line font-bold font30">-</text>
			  </view>
		<view class="m-3" v-if="command" v-for="(i, index) in command" :key="i.id" @click="liulan(i.id,i)" >
			<view class="d-flex d-flex-middle d-flex-between mb-1">
				<view class="d-flex d-flex-middle" @click.stop="user(i.uid)">
					<view class="position-relative img-bg d-flex d-flex-center d-flex-middle mr-1">
						<image v-bind:src="i.avatar" class="img-bg-img" mode="aspectFill"></image>
						<view class="sex" style="position: absolute; width: 35rpx; height: 35rpx; bottom: 0; right: 0;">
							<image v-if="i.gender === 1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png" style="width: 100%; height: 100%;"></image>
							<image v-if="i.gender === 2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png" style="width: 100%; height: 100%;"></image>
						</view>
					</view>
					<view>
						<view class="mb-1 font30">{{i.nickName}}</view>
						<view class="font24 color71">{{i.time}} {{i.ipProvince? '· ' + i.ipProvince.slice(0, 2) : '· 未知'}}</view>
					</view>
				</view>
				<view class="d-flex d-flex-middle" >
					<view class="position-relative z-index-10">
						<text class="iconfont icon-gengduo" style="font-size: 37rpx;" @click.stop="openMorePopup(i)"></text>
					</view>
				</view>
			</view>
			
			<view class="pb-2 d-flex d-flex-column" style="padding-left: 120rpx;">
				<view class="mb-1">{{i.remark}}</view>
				<view class="font26 mb-2">
					<view class="topic-list" v-if="i.topicNames">
						<view v-for="(topic, index) in i.topicNames.split(',')" 
							   :key="index" 
							   class="px-1">
						<view class="topic-content px-1 py-1">
							<text class="topic-hash">#</text>
							<text class="topic-name">{{topic}}</text>
						</view>
						</view>
					</view>
					
				</view>
				<view class=" mb-2 d-flex d-flex-column">
					<view class="d-flex  d-flex-middle mb-2" v-if="i.screenshot1">
						<image  v-if="i.screenshot1"
								:src="i.screenshot1"
								@load="ImgSize($event, index)"
								@click.stop="previwImage(index,0)"
								:class="[
									'rounded15',
									{
										'singlePic': !i.screenshot2 && !i.screenshot3,
										'MorePic': i.screenshot2 && !i.screenshot3,
										'threePic': i.screenshot2 && i.screenshot3
									}
								]"
								:mode="!i.screenshot2 ? 'aspectFill' : 'aspectFill'"
								:style="[{maxWidth: i.isLongChart && i.screenshot2 ? '420rpx' : '550rpx'}]"
						></image>
						<image  :class="['rounded15', 'ml-1', i.screenshot2&&!i.screenshot3? 'MorePic' : 'threePic']"
								v-if="i.screenshot2" 
								:src="i.screenshot2" 
								mode="aspectFill"
								@click.stop="previwImage(index,1)"
						></image>
						<image   :class="['rounded15', 'ml-1', 'mr-2', i.screenshot3? 'threePic' : '']" 
								v-if="i.screenshot3" 
								:src="i.screenshot3" 
								mode="aspectFill"
								@click.stop="previwImage(index,2)"
						></image>
					</view>
					<!-- <view class="aixin rounded30 px-1 py-1 d-flex d-flex-middle" @click.stop="gotoPromotion">
						<text class="iconfont icon-aixin_shixin mr" style="color: #FF6C00;"></text>
						<text class="font24">上热门</text>
					</view> -->
				</view>
				<view class="d-flex d-flex-middle pr-3 d-flex-between">
					<image class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png" @click.stop="share(i)" mode="widthFix" style="width: 26rpx; height: 26rpx;"></image>
					<view class="d-flex d-flex-middle" @click.stop="dianzan(i.id,2)">
						<image v-if="i.favorFlag" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png" style="width: 35rpx; height: 35rpx;"></image>
						    <text v-else class="iconfont icon-aixin1 color6d"></text>
						<text class="color71 font26 ml-1">{{i.favorCount}}</text>
					</view>
					<view class="d-flex d-flex-middle" @click.stop="gotoDetail(i)">
						<text class="iconfont icon-pinglun color6d"></text>
						<text class="color71 font26 ml-1">评论</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isLastPage&&command.length!==0" style="width: 100%;"  >
			<view v-if="cardLoading" class="rounded60 d-flex d-flex-center d-flex-middle" style="background-color: #f5f5f5;height: 1060rpx;">
				<text class="color999 font26">加载中...</text>
			</view>
			<text v-else class="d-flex  font30" style=" justify-content: center; color: #585858;  ">---到底了---</text>	
		</view>
		<view v-if="command.length==0" style="width: 100%;" >
			<view v-if="cardLoading" class="rounded60 d-flex d-flex-center d-flex-middle" style="background-color: #f5f5f5;height: 1060rpx;">
				<text class="color999 font26">加载中...</text>
			</view>
			<view v-else>
				<text class="position-relative d-flex font-bold font30" style="   justify-content: center;align-items: center; top: 405rpx;">暂时还没有发布博客</text>
				<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
			</view>
		</view>	
		</view>
		<uni-popup @maskClick="changedisplay"  ref="share" type="share"  safeArea backgroundColor="#fff" position: fixed  border-radius="8px 8px 0 0" z-index="10" >
			<view class="my-4 text-center">分享到</view>
			<view class="d-flex d-flex-between px-5 mb-4 bot" >
				<view class="d-flex-column d-flex-middle" @click="OnShare(1)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1.png" mode="widthFix" style="width: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">微信</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(2)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%9C%8B%E5%8F%8B%E5%9C%88.png" mode="widthFix" style="width: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">朋友圈</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(3)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/QQ.png" mode="widthFix" style="width: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">QQ好友</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(4)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/qq%E7%A9%BA%E9%97%B4.png" mode="widthFix" style="width: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">QQ空间</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(5)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png" mode="widthFix" style="width: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">小嗒好友</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup @maskClick="changedisplay"  type="bottom" ref="morePopup" background-color="#fff" border-radius="16px 16px 0 0 " style="z-index: 10;">
			<view class="popup-content pt-4">
				<view class="d-flex d-flex-middle ml-3 mt-2" @click="collect(i)">
					<image v-if="morePopupData.collectFlag" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%B6%E8%97%8F.png"  mode="heightFix" style="height: 40rpx; width: 40rpx;"></image>
					<image v-else src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241209161617.png" mode="heightFix" style="height: 40rpx; width: 40rpx;"></image>
					<text  v-if="!morePopupData.collectFlag" class="font32 ml-2">收藏</text>
					<text v-else class="font32 ml-2">取消收藏</text>
				</view>
				<view class="d-flex mt-2 ml-2 d-flex-middle ml-3 mb-4 mt-4" @click="gotoReportPage(morePopupData.id)">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%B8%BE%E6%8A%A5.png" mode="heightFix" style="height: 35rpx; width: 35rpx;"></image>
					<text class="font32 ml-2">举报</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { blogApi } from '@/http/blogApi.js';
	export default {
		data() {
			return {
				title: '话题',
				titleBgOpcity: 0,
				titleOpcity: 1,
				titleFontSize: 50,
				textColor: '#ffffff',
				morePopupData: {
					collectFlag: 0
				},
				topicId:'',
				imgs:[],
				topicName:'',
				cardLoading:true,
				isLastPage:true,
				topicLen: 0,
				shareData: {
					href: "https://www.17daban.cn/",
					title: "小嗒组队分享",
					summary: null,
					imageUrl: null
				},
				command: [],
				shoucangparam: {
					blogId:'',
					flag: true,
					type:2
				},
				display: 'flex',
				params:{
					pageIndex:1,//当前页码
					pageSize:3,//每页条目
				},
				isLastPage: false
			}
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.params.pageIndex += 1;
				this.queryBlogRecommendListData();
			}
		},
		onReady() {
		    const systemInfo = uni.getSystemInfoSync();
		    this.statusBarHeight = systemInfo.statusBarHeight;
		},
		onLoad(options) { 
			this.topicId = options.topicId;
			this.topicName = options.topicName;
			this.command = [];
			this.queryBlogRecommendListData();
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			this.titleBgOpcity = Math.round(scrollTop-40) / 40
			this.titleOpcity = -(Math.round(scrollTop-60) / 40)
			if(scrollTop < 65) {
				this.textColor = '#ffffff'
			} else {
				this.textColor = '#000000'
			}
		},
		methods: {
			goBack(){
				uni.navigateBack({
					delta: 1
				})
			},
			gotoReportPage() {
				console.log(this.morePopupData.id);
				uni.navigateTo({
					url: "/pagesMain/ReportPage/ReportPage?type=3&idRef="+this.morePopupData.id
				})
			},
			changedisplay() {
				this.display="flex"
			},
			async queryBlogRecommendListData(){//查询推荐的博客列表
			this.params.topicIds=this.topicId
				try {
					// console.log('开始加载数据，当前页码：', this.params.pageIndex); // 添加日志
					const params = { ...this.params };
					const res = await blogApi.queryBlogRecommend(params);
					this.cardLoading = false;
					this.topicLen = res.total
					const records = Array.isArray(res.records) ? res.records : [];
					if (this.params.pageIndex === 1) {
						this.command = records.map(i => ({
							...i,
							isLongChart: 1
						}));
					} else {
						const newRecords = records.map(i => ({
							...i,
							isLongChart: 1
						}));
						const existingMap = new Map(this.command.map(item => [item.id, item]));
						newRecords.forEach(item => {
							if (!existingMap.has(item.id)) {
								this.command.push(item);
							}
						});
					}
					if(records.length < this.params.pageSize){
						this.isLastPage = true
					}
				} catch (error) {
					console.error('加载数据失败：', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				}
			},
			async dianzan(id,type){//点赞
				if(type===2){	
				const param = {
				    blogId: id,
				    flag: true,
					type:1
				};
				this.command.forEach(i =>{
					if(i.id==id){
						i.favorFlag=!i.favorFlag;
						if(i.favorFlag){
							i.favorCount=i.favorCount+1;
							let res =  blogApi.dianzanBlog(param);
						}else{
							i.favorCount=i.favorCount-1;
							param.flag=false;
							let res =  blogApi.dianzanBlog(param);
						}
					}
					
				})
				} else {
					const param = {
					        blogId: id,
					        flag: true,
							type:1
					     };
					this.concern.forEach(i =>{
						if(i.id==id){
							i.favorFlag=!i.favorFlag;
							if(i.favorFlag){
								i.favorCount=i.favorCount+1;
								let res =  blogApi.dianzanBlog(param);
							} else {
								i.favorCount=i.favorCount-1;
								param.flag=false;
								let res =  blogApi.dianzanBlog(param);
							}
						}
					})
				}
			},
			async shoucang(id,type){//收藏
					if(type===2){
					this.shoucangparam.blogId=id;
					this.command.forEach(i =>{
						if(i.id==id){
							i.collectFlag=!i.collectFlag;
							if(i.collectFlag){
								let res =blogApi.dianzanBlog(this.shoucangparam);
							}else{
								this.shoucangparam.flag=false;
								let res =blogApi.dianzanBlog(this.shoucangparam);
							}
						}
					})
				} else {
					this.shoucangparam.blogId=id;
					this.concern.forEach(i =>{
						if(i.id==id){
							i.collectFlag=!i.collectFlag;
							if(i.collectFlag){
								let res =blogApi.dianzanBlog(this.shoucangparam);
							}else{
								this.shoucangparam.flag=false;
								let res =blogApi.dianzanBlog(this.shoucangparam);
							}
						}
					})
				}	
			},
			ImgSize(event, id) {
				if(event.target.width > event.target.height) { // 横图
					this.command[id].isLongChart = 0
				}
			},
			async liulan(id,item){//浏览
				const param = {
					blogId: id,
					flag: true,
					type:3
			    };
				let res = await blogApi.dianzanBlog(param);
				let data = JSON.stringify(item);
				uni.navigateTo({
					url: '/pagesMain/detail/detail?data='+data
				})
			},
			gotoDetail(item) {// 跳转到详情页
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pagesMain/detail/detail?data='+data
				})
			},
			user(uid){//点击头像进入个人页
				if(uid==this.$store.state.user.uid){
					
					uni.switchTab({
					       url: `/pages/user/user`
					     });
				} else {
					uni.navigateTo({
					    url: `/pagesMain/HomePage/HomePage?id=${uid}`
					});
				}
			},
			share(item) {
				this.shareData.summary = item.remark
				this.shareData.imageUrl = item.screenshot1
				
			
				this.$refs.share.open()
				this.display = 'none'
			},
			OnShare(type) {
				if(type === 1 || type === 2) {
					uni.share({
						provider: "weixin",
						scene: type===1? 'WXSceneSession' : 'WXSceneTimeline',
						type: 0,
						href: this.shareData.href,
						title: this.shareData.title,
						summary: this.shareData.summary,
						imageUrl: this.shareData.imageUrl,
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
					this.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
				if(type === 3 || type === 4) {
					uni.share({
						provider: "qq",
						scene: type===3? 'WPA' : 'QZONE',
						type: 0,
						href: this.shareData.href,
						title: this.shareData.title,
						summary: this.shareData.summary,
						imageUrl: this.shareData.imageUrl,
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
					this.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
				if(type === 5) {
					uni.showToast({
						title:'此功能暂未开发！',
						icon:'none',
					})
					this.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
			},
			openMorePopup(i) {
				this.morePopupData = i
				
				this.$refs.morePopup.open('bottom')
			},
			// 图片预览
			previwImage(id, index) {
				if(this.command[id].screenshot1) {
					this.imgs.push(this.command[id].screenshot1)
				}
				if(this.command[id].screenshot2) {
					this.imgs.push(this.command[id].screenshot2)
				}
				if(this.command[id].screenshot3) {
					this.imgs.push(this.command[id].screenshot3)
				}
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.imgs,// 需要预览的图片http链接列表
				});
				this.imgs = []
			}
		}
	}
</script>

<style>
.background {
   /* 你可以根据需要调整背景颜色 */
  width: 100%;
  height: 100vh; /* 视口高度 */
  display: flex;
  opacity: 0.99;
}
.hash {
  font-size: 430rpx; /* 你可以根据需要调整#的大小 */
  color: #25628f; /* #符号的颜色 */
  position: absolute;
  left: 397rpx;
  top: 0rpx;
  opacity: 0.7;
  z-index: 1;
}
.img-bg-img{
	height: 85rpx;
	width: 85rpx;
	border-radius: 100rpx;
	border: solid 5rpx #fff;
}
.aixin{
	background: #FFA5DF;
	width: 110rpx;
}
.topic-hash {
    color: #18c3ff;
    font-size: 28rpx;
    margin-right: 2rpx;
    font-weight: bold;
}

.topic-name {
    font-size: 28rpx;
    color:#999899;
}
.topic-list {
    margin-bottom: 10rpx;
    display: flex;
    flex-wrap: wrap;
}
.topic-content {
    display: flex;
    align-items: center;
	border-radius: 30rpx;
	background: #F0F7FF;
}

.huati{
	background: linear-gradient( 90deg, #5DB0FE 0%, rgba(93,176,254,0.8) 1%, #E8BAFC 100%);
}
.MorePic {
		width: 200rpx;
		height: 200rpx;
	}
.singlePic {
    width: 550rpx !important; /* 固定宽度 */
    height: 382rpx !important; /* 固定高度 */
    border-radius: 15rpx;
}
.threePic {
    width: 200rpx;
    height: 180rpx;
}	
.recommendation {
  display: flex;
  height: 120rpx;
  align-items: center; /* 垂直居中对齐 */
}

.text {
  font-size: 16px; /* 字体大小 */
  color: black; /* 字体颜色 */
  position: relative;
  left: 49rpx;
  top: -17rpx;
  margin-right: 5px; /* 与横线之间的间距 */
}

.line {
	    position: absolute;
		left: 71rpx;
		top: 50rpx;
  font-size: 16px; /* 字体大小 */
  color: black; /* 字体颜色 */
}
</style>
